{{template "shared/bootstrap_table_js.html"}}

<script>
    var $dataGrid = $('#dataGrid');
    var $searchForm = $('#searchForm');

    var highlightPk = 0;

    $(function () {
        pageInit()
    });

    function pageInit() {
        dataGridInit();

        $('#btnSearch').on('click', function () {
            refreshToFirstPage()
        });

        $('#btnClearSearch').on('click', function () {
            $('select', $searchForm).selectpicker('val', '');
            $('input', $searchForm).val('');
            refreshToFirstPage();
        });

        $dataGrid.on('load-success.bs.table', function () {
            if (highlightPk !== null && typeof highlightPk !== 'undefined') {
                sdtheme.highlight($dataGrid.find('tbody tr[data-pk="' + highlightPk + '"]'));
            }
            highlightPk = null;
        });

        sdtheme.searchPanelStatusInit('searchpanelbtn')
    }

    function refreshToFirstPage() {
        //表格刷新时，保存查询条件到cookie
        sdtheme.saveSearchText('courseSearchForm');
        //刷新并跳转至第1页
        $dataGrid.bootstrapTable('refresh', {pageNumber: 1});
        //同时要更新cookie里保存当前页码
        $.cookie('dataGrid.bs.table.pageNumber', 1, {expires: 1});
    }

    function refresh(pk) {
        $dataGrid.bootstrapTable('refresh');
        highlightPk = pk;
    }

    function dataGridInit() {
        $dataGrid.bootstrapTable({
            url: '{{urlfor "ArticleCategoryController.DataGrid"}}',
            method: 'post',
            sidePagination: 'server',
            idField: 'Id',
            queryParamsType: 'limit',
            queryParams: function (params) {
                params.CategoryName = $.trim($('.searchForm input[name="CategoryName"]').val());
                return params;
            },
            pagination: true,
            showRefresh: true,
            showColumns: true,
            toolbar: '#toolbar',
            pageSize: 10,
            pageList: [5, 10, 20, 100, 200],
            paginationShowPageGo: true,
            paginationUseBSSelect: true,
            cookie: true,
            classes: 'table table-bordered table-hover',
            undefinedText: '',
            sortName: 'Id',
            sortOrder: 'desc',
            stickyHeader: true,
            resizable: true,

            rowAttributes: function (row, index) {
                return {'data-pk': row.Id}
            },
            columns: [{
                field: 'state',
                checkbox: true,
                radio: false
            }, {
                field: 'Id',
                title: 'ID',
                align: 'center',
                width: '80px',
                sortable: true
            }, {
                field: 'CategoryName',
                title: '栏目名称',
            }, {
                field: 'ListOrder',
                title: '排序'
            }, {
                field: 'AddTime',
                title: '添加时间',
                formatter: function (value, row, index) {
                    return new Date(value * 1000).format('yyyy-MM-dd hh:mm:ss')
                }
            }, {
                field: 'operator',
                title: '操作',
                align: 'center',
                width: '250px',
                formatter: function (value, row, index) {
                    var html = [];
                    html.push('<div class="btn-group">');
                    if ('{{.canEdit}}' === 'true') {
                        html.push('    <button class="btn btn-primary btn-xs" onclick="EditFun(' + row.Id + ')"><i class="fa fa-pencil"></i> 编辑</button>');
                    }
                    if ('{{.canDelete}}' === 'true') {
                        html.push('    <button class="btn btn-danger btn-xs" onclick="DeleteFun(' + row.Id + ')"><i class="fa fa-trash"></i> 删除</button>')
                    }
                    html.push('</div>');
                    return html.join("")
                }
            }],
            onLoadSuccess: function (data) {
                layer.closeAll('loading')
            },
            onSort: function (name, order) {

            },
            onCheckAll: function (rows) {
                $(".table-btn-check-enable").removeAttr("disabled")
            },
            onCheck: function (rows) {
                $(".table-btn-check-enable").removeAttr('disabled');
            },
            onUncheck: function (rows) {
                if ($("#dataGrid").bootstrapTable("getSelections").length === 0) {
                    $(".table-btn-check-enable").attr('disabled', 'disabled');
                }
            },
            onUncheckAll: function () {
                //禁用删除需要勾选才能用的按钮
                if ($("#dataGrid").bootstrapTable("getSelections").length === 0) {
                    $(".table-btn-check-enable").attr('disabled', 'disabled');
                }
            },
            onLoadError: function (status) {
                layer.alert('获取数据失败,错误代码：' + status);
            }
        });
    }

    function EditFun(Id) {
        var title = "添加栏目";
        if (Id > 0) {
            title = "编辑栏目"
        }
        var url = '{{urlfor "ArticleCategoryController.Edit"}}/' + Id;
        layer.open({
            type: 2,
            title: title,
            shadeClose: false,
            shade: 0.2,
            maxmin: true,
            shift: 1,
            area: ['1000px', '600px'],
            content: url,
            btn: ['保存', '关闭'],
            yes: function (index, layerNo) {
                var iFrameWin = window[layerNo.find('iframe')[0]['name']];
                iFrameWin.FormSubmit();
            }
        })
    }

    function DeleteFun(Id) {
        var url = '{{urlfor "ArticleCategoryController.Delete"}}';

        var node = $dataGrid.find('tr[data-tt-id="' + Id + '"]');

        if (node.length === 0) {
            layer.alert('请选择想要删除的项', {icon: 0, title: '提示'})
        }

        layer.confirm('您是否要删除所选的项？', {
            btn: ['是', '否'],
            icon: 3,
            title: '请确认'
        }, function () {
            var params = {Id: Id};
            $.sdpost(url, params, function (res) {
                if (res.code === 0) {
                    layer.msg(res.msg, {icon: 1, title: '成功'});
                    refresh(0);
                } else {
                    layer.alert(res.msg, {icon: 2, title: "失败"});
                }
            })
        });
    }

    function refresh(pk) {
        $dataGrid.bootstrapTable('refresh');
        highlightPk = pk;
    }
</script>